<template>
  <div class="play" v-if='playList.length>0 && currentSong'>
    <transition appear enter-active-class="animated fadeInUpBig" leave-active-class="animated fadeOutDownBig" appear-active-class="animated fadeInUpBig">
      <div class="max-play" v-show="fullScreen" ref="maxplay" :style="{backgroundImage:'url(http://'+currentSong.Singerimgages+')'}">
        <div class="max-play-ssg">
          <!--头部-->
          <div class="max-top">
            <div @click="playerback">
              <i class="icon-back"></i>
            </div>
            <div>
              <p>{{currentSong.Singerinof.name}}</p>
              <p>{{currentSong.Singerinof.singer[0].name}}</p>
            </div>
            <div></div>
          </div>
          <!--CD转盘/歌词-->
          <div class="cd">
            <!-- <div> -->
              <mt-swipe :auto="0">
                <mt-swipe-item>
                  <div class="max-center">
                    <div>
                      <img :class="cdclass" :src="'http://'+currentSong.Singerimgages">
                    </div>
                  </div>
                  <div class="max-bottom">
                    <p>{{playIngLyric}}</p>
                  </div>
                </mt-swipe-item>
                <mt-swipe-item>
                  <div class="mode-r" ref="modeR">
                    <div class="modediv" >
                      <div v-if="currentLyric">
                            <p class="modeLyric" ref="Lyricline"  v-for="(lyrice,i) of currentLyric.lines" :key="i"
                            :class="{'modedivColor':NewcurrentLyric==i}">
                        {{lyrice.txt}}
                      </p>
                      </div>

                    </div>
                  </div>
                </mt-swipe-item>
              </mt-swipe>
            <!-- </div> -->
          </div>
          <!--进图条-->
          <div class="max-bottom-two">
            <p>{{format(newTime)}}</p>
            <div>
              <!--Mint-UI 进度条 有两个事件  input滑动就会触发、change当滑动完毕才执行 -->
              <mt-range v-model="rangeValue" @input="inputRead" @change="changeRead"></mt-range>
            </div>
            <p>{{format(newduration)}}</p>
          </div>
          <!--控制歌曲(暂停、上下曲)-->
          <div class="max-control">
            <div>
              <i :class="iconMode" @click="chageMode"></i>
              <i class="icon-prev" @click="prev" :class="disableClass"></i>
              <i :class="playIcon" @click="togglePlaying"></i>
              <i class="icon-next" @click="next" :class="disableClass"></i>
              <i class="icon-not-favorite"></i>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <transition appear appear-active-class="animated fadeInUpBig" enter-active-class="animated fadeInUpBig" leave-active-class="animated fadeOutDownBig">
      <div class="min-play" v-show="!fullScreen">
        <div class="min-play-ssg">
          <div class="min-left" @click="playerback">
            <div>
              <img :class="cdclass"  :src="'http://'+currentSong.Singerimgages">
            </div>
            <div>
              <div>{{currentSong.Singerinof.name}}
                <p>{{currentSong.Singerinof.singer[0].name}}</p>
              </div>
            </div>
          </div>
          <div class="min-right">
            <div>
              <div>
                <i :class="playIconMin" @click="togglePlaying"></i>
                <canvas ref="canvas" width="30px" height="30px"></canvas>
              </div>
              <div>
                <i class="icon-playlist"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <audio ref="audio" :src="currentSong.SingerUrl" @canplay="ready" @error="error" @timeupdate="timeupdate"></audio>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
import * as Type from '@/store/mutations-types'
import {playMode} from "@/store/config"
import Lyric from 'lyric-parser'
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      rangeValue:0,//进度条百分比
      SongReady:false,//当前音频是否加载完毕
      newTime:0,//当前播放的时间、进度条
      newduration:0,//当前歌曲时间总时长
      currentLyric:null,//存放歌词
      NewcurrentLyric:0,//存放当前播放的歌词索引
      scroll:null,
      playIngLyric:""//CD下的歌词
    }
  },
  computed: {
    ...mapState(["playList","fullScreen","playing","currenIndex","mode"]),
    ...mapGetters(["currentSong"]),
    playIcon(){
      return this.playing ? "icon-pause":"icon-play"
    },
    playIconMin(){
      return this.playing ? "icon-pause-mini":"icon-play-mini"
    },
    cdclass(){
      return this.playing ? "play":"play pause"
    },
    disableClass(){
      return this.SongReady ? " " : "disable"
    },
    //根据不同的播放模式显示不同的图标
    iconMode(){
      return this.mode==playMode.sequence ? "icon-sequence" : this.mode==playMode.lopp ? "icon-loop" : "icon-random"
    }
  },
  methods: {
    playerback(){
      this.$store.commit(Type.UPDATE_FULLSCREEN)
    },
    //处理播放、暂停
    togglePlaying(){
      // if(!this.SongReady){
      //   return
      // }
      this.$store.commit(Type.UPDATE_PLAYING,!this.playing)
      //点击暂停时歌词也要暂停
      if(this.currentLyric){
        this.currentLyric.togglePlay();
      }
    },
    //上一曲
    prev(){
      if(!this.SongReady){
        return
      }
      let index=this.currenIndex-1;
      if(index==-1){
        index=this.playList.length-1;
      }
      this.$store.commit(Type.UPDATE_CURRENTINDEX,index)
      if(!this.playing){
         this.$store.commit(Type.UPDATE_PLAYING,!this.playing)
      }
      this.SongReady=false;
    },
    //下一曲
    next(){
      if(!this.SongReady){
        return
      }
      let index=this.currenIndex+1

      if(index==this.playList.length){
        index=0;
      }
      this.$store.commit(Type.UPDATE_CURRENTINDEX,index)
      if(!this.playing){
         this.$store.commit(Type.UPDATE_PLAYING,!this.playing)
      }
      this.SongReady=false;
    },
    //视频加载完毕
    ready(){
      this.SongReady=true;
      //获取当前歌曲时间总时长
      this.newduration=this.$refs.audio.duration;
    },
    //视频加载失败
    error(){

    },
    //播放时触发的事件、当前播放的秒数
    timeupdate(e){
      //得到当前播放时间
      this.newTime=e.target.currentTime;
      //计算当前进度条百分比
      this.rangeValue=this.newTime/this.newduration*100;
      //Mint-UI 进度条 有两个事件  input滑动就会触发、change当滑动完毕才执行
      // console.log(this.rangeValue+"%");
      //绘画mini进度条
      this.draw(this.rangeValue);
      //当歌曲播放完毕时
      if(this.newTime==this.newduration){
         this.$store.commit(Type.UPDATE_PLAYING,!this.playing)
         //判断是否还有下一曲
         if(this.playList.length>1){
           setTimeout(()=>{
             this.next()
           },1000)
         }
      }
    },
    //格式化aduio获取的时间转换成 分:秒
    format(times){
      times=times | 0;
      let m=times/60 | 0;
      let s=times%60;
      if(m<10){
        m="0"+m
      }
      if(s<10){
        s="0"+s
      }
      return `${m}:${s}`
    },
    //拖动进度条
    inputRead(){
      // console.log(this.rangeValue)
      //在拖动的时候歌曲先暂停(注意、这里推动完了之后又得让歌曲在播放,所以要用到change事件绑定changeRead事件来播放歌曲↓)
      this.$store.commit(Type.UPDATE_PLAYING,false)
      //计算当前拖动的时候歌曲的时间、并且歌曲时间等于当前拖动进度条的时间
      this.$refs.audio.currentTime=this.rangeValue/100*this.$refs.audio.duration
    },
    //拖动完毕执行又执行的播放的事件↑
    changeRead(){
      this.$store.commit(Type.UPDATE_PLAYING,true)
      //拖动进度条改变歌词位置
      if(this.currentLyric){
        this.currentLyric.seek(this.rangeValue/100*this.$refs.audio.duration*1000)
      }
    },
    //canvas绘画
    draw(num){
      if(this.$refs.canvas){
        let canvas=this.$refs.canvas;
        //创建绘画环境
        let ctx=canvas.getContext('2d');
        //另起一条路
        ctx.beginPath();
        //每次绘画前都清屏
        ctx.clearRect(-5,-5,canvas.width,canvas.height);
        //设置颜色
        ctx.strokeStyle="#fff";
        //设置线条粗细
        ctx.lineWidth=2;
        //设置绘画的路径
        ctx.arc(15,15,13,num*3.6*Math.PI/180,360*Math.PI/180,true);
        //开始绘画
        ctx.stroke();
      }

    },
    //点击改变播放模式
    chageMode(){
      this.$store.commit(Type.UPDATE_CHANGEMODE);
      //this.mode==playMode.random 说明这是随机播放
        if(this.mode==playMode.random){
          //这里也要把audio标签自带的loop属性设为flase;
          this.$refs.audio.loop=false;
          //打乱this.playList数组
          this.$store.commit(Type.UPDATE_PLALIST)
          console.log(this.playList)
        }else{
          console.log(this.$refs.audio)
          //判断是否是单曲循环
          if(this.mode==playMode.lopp){
            //把audio标签自带的loop属性设为true就是单曲循环
            this.$refs.audio.loop=true;
          }else{
            //把audio标签自带的loop属性设为flase;
            this.$refs.audio.loop=false;
          }
            //顺序循环列表播放
            this.$store.commit(Type.UPDATE_SEQUENCELIST)
        }
    },
    getLyric(){
      if(this.currentSong.lyric){
        this.currentLyric=new Lyric(this.currentSong.lyric,this.handlerLyric)
        // console.log(this.currentLyric)
        if(this.playing){
          //让歌词播放
          this.currentLyric.play();
        }
      }
      else{
        this.playIngLyric="暂无歌词";
        this.currentLyric=null;
        this.NewcurrentLyric=0
      }
    },
    handlerLyric({lineNum,txt}){
      this.NewcurrentLyric=lineNum;
      // console.log(txt)
      if(lineNum>5){
        let allLyricline=this.$refs.Lyricline[lineNum-5];
        this.scroll.scrollToElement(allLyricline,1000);
      }else{
        this.scroll.scrollTo(0,0,1000);
      }
      this.playIngLyric=txt;
    }
  },
  watch: {
    //currentSong数据发生变化就会播放
    currentSong(){
      if(this.currentLyric){
        this.currentLyric.stop();
      }
      //延迟到数据加载好后在执行
      this.$nextTick(()=>{
        if(this.$refs.audio){
          this.$refs.audio.play();
          //调用歌词
          this.getLyric();
          //挂载BScroll
          this.scroll=new BScroll(this.$refs.modeR)
        }
      })
    },
    //根据当前播放状态决定点击后是否播放
    playing(newplaying){
      //延迟到数据加载好后在执行
      this.$nextTick(()=>{
        if(this.$refs.audio){
        newplaying ? this.$refs.audio.play():this.$refs.audio.pause();
        }
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variable.styl';
  .play
    .max-play
      position fixed
      top 0
      left 0
      right 0
      bottom 0
      z-index 150
      background-repeat no-repeat
      background-size cover
      .max-play-ssg
        width 100%
        height 100%
        background rgba(0,0,0,.8)
        .max-top
          width 92%
          margin 0 auto
          padding-top .4rem
          display flex
          justify-content space-between
          text-align center
          div:nth-of-type(1)
            i
              display block
              color $color-text
              font-size $font-sise-xs
              transform rotate(-90deg)
          div:nth-of-type(2)
            width 50%
            p
              width 100%
              overflow: hidden
              text-overflow:ellipsis
              white-space:nowrap
              font-size $font-sise-xl
            p:nth-of-type(2)
              margin-top .4rem
        .cd
          margin-top 1rem
          width 100%
          height 8.5rem
          .max-center
            margin-top .2rem
            div
              img
                width 5.5rem
                height 5.5rem
                display block
                margin 0 auto
                border-radius 50%
                // border .4rem
                box-shadow:-5px 0px 10px orange,0px -5px 10px blue,5px 0px 10px red,0px 5px 10px yellow;
                &.play
                  animation pig 15s linear infinite
                &.pause
                  animation-play-state paused
          .max-bottom
            margin 1.2rem 0rem 0rem 0rem
            p
              text-align center
              color $color-text-i
          .mode-r
            width 100%
            height 90%
            overflow hidden
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            .modediv
              div
                p
                  padding 5px 0px
                  font-size .3rem
                  text-align center
                  color $color-text-i
                  &.modedivColor
                    color $color-text
        .max-bottom-two
          width 85%
          height .6rem
          margin 0 auto
          display flex
          justify-content space-between
          div
            width 90%
            margin 0 auto
            text-align center
          p
            line-height .6rem
        .max-control
          margin-top 1rem
          width 100%
          div
            width 80%
            margin 0 auto
            display flex
            justify-content space-between
            align-items center
            i
              font-size $font-sise-xsl
              color $color-text
            i:nth-of-type(3)
              font-size $font-sise-xxsl
            i:nth-of-type(5)
              color $color-red
            i:nth-of-type(2)
              &:disable
                color $color-text-i
            i:nth-of-type(4)
              &:disable
                color $color-text-i
    .min-play
      position fixed
      left 0
      bottom 0
      width 100%
      height 1.5rem
      background #333
      z-index 180
      .min-play-ssg
        width 90%
        height 100%
        margin 0 auto
        display flex
        justify-content space-between
        align-items center
        .min-left
          display flex
          div:nth-of-type(1)
            img
              width 1.2rem
              height 1.2rem
              border-radius 50%
              &.play
                animation pig 15s linear infinite
              &.pause
                animation-play-state paused
          div:nth-of-type(2)
            display flex
            align-items ce+nter
            margin-left .3rem
            div
              p
                margin-top .2rem
                color $color-text-d
        .min-right
          div
            display flex
            div
              i
                disply inline-block
                color $color-text
                font-size $font-sise-xsl
                margin 0rem .2rem
            div:nth-of-type(1)
              position relative
              width 30px
              height 30px
              i
                margin 0rem
              canvas
                position absolute
                top 0
                left 0.005rem
                z-index -1
  @keyframes pig
    0%
      transform rotate(0)
    100%
      transform rotate(360deg)
</style>


